<template>
    <dv-border-box-12>
        <!-- <echarts id="main" width="200px" height="90px" :option="option"></echarts> -->
        <div class="box">
            <div class="box-show">
                <div class="show-header">
                    <span class="spans-icon">
                        <v-icon name="chart-bar" class="text-icon"></v-icon>
                    </span>
                    <span>任务通过率</span>
                    <span>
                        <dv-decoration-3 style="width:100px;height:20px;" />
                    </span>
                </div>
                <div class="show-content-one">
                    <echarts id="main" width="260px" height="210px" :options="option" ref="e"></echarts>
                </div>
                <div class="show-content-two">
                    <div class="item-box mt-2" v-for="(item, index) in numberData" :key="index">
                        <div class="d-flex">
                            <span class="coin">￥</span>
                            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
                        </div>
                        <p class="text" style="text-align: center;">
                            {{ item.text }}
                            <span class="colorYellow">(件)</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </dv-border-box-12>
</template>

<script>
import echarts from '@/components/echarts/index';
export default {
    data() {
        return {
            option: {
                color: [
                    "#37a2da",
                    "#32c5e9",
                    "#9fe6b8",
                    "#ffdb5c",
                    "#ff9f7f",
                    "#fb7293",
                    "#e7bcf3",
                    "#8378ea"
                ],
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                legend: {
                    orient: "horizontal",
                    icon: "circle",
                    bottom: 0,
                    x: "center",
                    data: ["data1", "data2", "data3", "data4", "data5", "data6"],
                    textStyle: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        name: "通过率统计",
                        type: "pie",
                        radius: [10, 50],
                        roseType: "area",
                        center: ["50%", "40%"],
                        data: [
                            { value: 10, name: "data1" },
                            { value: 5, name: "data2" },
                            { value: 15, name: "data3" },
                            { value: 25, name: "data4" },
                            { value: 20, name: "data5" },
                            { value: 35, name: "data6" }
                        ]
                    }
                ],
            },
            numberData: [
                {
                    number: {
                        number: [15],
                        toFixed: 1,
                        textAlign: 'left',
                        content: '{nt}',
                        style: {
                            fontSize: 24
                        }
                    },
                    text: '今日构建总量'
                },
                {
                    number: {
                        number: [1144],
                        toFixed: 1,
                        textAlign: 'left',
                        content: '{nt}',
                        style: {
                            fontSize: 24
                        }
                    },
                    text: '总共完成数量'
                },
                {
                    number: {
                        number: [361],
                        toFixed: 1,
                        textAlign: 'left',
                        content: '{nt}',
                        style: {
                            fontSize: 24
                        }
                    },
                    text: '正在编译数量'
                },
                {
                    number: {
                        number: [157],
                        toFixed: 1,
                        textAlign: 'left',
                        content: '{nt}',
                        style: {
                            fontSize: 24
                        }
                    },
                    text: '未通过数量'
                }
            ]
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.changeTiming()
    },
    watch: {

    },
    methods: {
        changeTiming() {
            setInterval(() => {
                this.changeNumber()
            }, 3000)
        },
        changeNumber() {
            this.numberData.forEach((item, index) => {
                item.number.number[0] += ++index
                item.number = { ...item.number }
            })
        }
    },
    components: {
        echarts
    },
};
</script>

<style lang="scss" scoped>
.dv-border-box-12 {
    width: 300px;
}

.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;

    .box-show {
        width: 100%;
        height: 100%;
        background: rgba(19, 25, 47, 0.6);
        display: flex;
        flex-wrap: wrap;

        .show-header {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: white;
            display: flex;
            align-items: center;

            // padding: 8px 0 0 0;
            .spans-icon {
                margin-top: 10px;
            }

            span {
                margin: 8px 0 0 8px;
                line-height: 20px;
                display: inline-block;
                color: #c3cbde;
                font-size: 12px;
            }
        }

        .show-content-one {
            width: 100%;
            height: 220px;
            display: flex;
            align-items: center;
        }

        .show-content-two {
            width: 100%;
            height: 130px;
            display: flex;
            // align-items: center;
            flex-wrap: wrap;

            .item-box {
                &>div {
                    padding-right: 5px;
                }

                font-size: 14px;
                float: right;
                position: relative;
                width: 50%;
                color: #d3d6dd;
                .d-flex{
                    display: flex;
                }
                .dv-digital-flop {
                    width: 120px;
                    height: 30px;
                }

                // 金币
                .coin {
                    position: relative;
                    top: 6px;
                    font-size: 20px;
                    color: #ffc107;
                }

                .colorYellow {
                    color: yellowgreen;
                }

                p {
                    text-align: center;
                }
            }

        }
    }
}
</style>
